import { useCallback, useState } from "react";
import useCCThrottle from "./useThrottle";
import usedebounce from "./useDebounce";
import { Divider } from 'antd';

const boxStyle = {
  margin: '10px',
  border: '1px solid #ccc',
  borderRadius: '10px',
  padding: '10px',
}

export default () => {
  const [num, setNum] = useState(1);  
  /* 节流hook测试 */
  let clickFn = useCallback((e) => {
    console.log('clickFn...', e)
    throllteFn(111, 222, 333, e)
  }, [])
  let doubleClickFn = useCallback((a, b, c, event) => {
    console.log('doubleClickFn...', a, b, c, event)
  }, [])
  let { flag, isLoading, throllteFn } = useCCThrottle(doubleClickFn, 5000)

  /* 防抖hook测试 */
  let clickFn1 = useCallback((e) => {
    console.log('clickFn1...', e)
    debounceFn(111, 222, 333, e) 
   }, [])

  let doubleClickFn1 = useCallback((a, b, c, event) => {
    console.log('doubleClickFn1...', a, b, c, event)
    setNum((value)=>{
      console.log('oldValue...', value)
      return  value + 1
    })
  }, [])
  let { debounceFn } = usedebounce(doubleClickFn1, 500)
  return (
    <div style={boxStyle}>
      <p>自定义防抖节流useHooks使用测试</p>
      <Divider>这是一个使用useThrottle的测试</Divider>
      <p>useCCThrottle返回的变量isLoading: {isLoading ? 'loading' : 'end'}</p>
      <p>useCCThrottle返回的变量flag: {flag ? 'loading' : 'end'}</p>
      <button onClick={clickFn} >点击节流</button>
      <Divider>这是一个使用useDebounce的测试</Divider>
      <p>当前的值{num}</p>
      <button onClick={clickFn1} >点击防抖</button>
    </div>
  );
};